<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
        <li>无序列表5</li>
    </ul>

    <script>
        var li=document.createElement("li")
        var liText=document.createTextNode("这是我们js创建的li")
        var ul=document.querySelector("ul")
        li.appendChild(liText)
        ul.insertBefore(li,ul.firstChild)   //insertBefore(需要添加的结点，添加的位置)

        //第一种红插入方法
        var child=ul.children; //获取ul所有的子元素结点
        var index=parseInt((child.length-1)/2)
        ul.insertBefore(li,child[index])   //在中间元素之前插入一个新的li，默认前面
        
        
        //第二种插入方法
        var lili=document.createElement("li")
        var liText2=document.createTextNode("这是我们。。。")
        lili.appendChild(liText2)
        var index4=ul.children[4]
        ul.insertBefore(lili,index4)
        // ul.insertBefore(lili,ul.children[4])
        
    </script>
    
</body>
</html>